﻿<!DOCTYPE html>
<html>
	<head>
		<!-- 引入图标谷歌字体 -->
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<!-- 引入materialize css -->
		<link type="text/css" rel="stylesheet" href="../../Content/css/materialize.css" media="screen,projection" />
		<!-- 设置网页适配手机 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="utf-8">
		<title>微信支付</title>
	</head>
	<body>
		<div class="row">
			<div class="col s12 teal">
				<ul class="tabs teal">
					<li class="tab col s6"><a href="#test1" style="color: white;">未缴费</a></li>
					<li class="tab col s6"><a href="#test2" style="color: white;">已缴费</a></li>
				</ul>
			</div>
			<div id="test1" class="col s12">
				<ul class="collection">
					<li class="collection-item">
						<p>
							<input type="checkbox" id="cf1" />
							<label for="cf1">处方 2019-10-01 12:13 金额 120¥</label>
						</p>
					</li>
					<li class="collection-item">
						<p>
							<input type="checkbox" id="cf2" />
							<label for="cf2">处方 2019-09-30 10:23 金额 80¥</label>
						</p>
					</li>
					<li class="collection-item">
						<p>
							<input type="checkbox" id="cf3" />
							<label for="cf3">处方 2019-09-29 09:02 金额 5000.23¥</label>
						</p>
					</li>
					<li class="collection-item">
						<p>
							<input type="checkbox" id="cf4" />
							<label for="cf4">处方 2019-09-28 13:23 金额 13.12¥</label>
						</p>
					</li>
					<li class="collection-item">
						选择0张处方 总计0¥
					</li>
				</ul>
				<div class="col s12 center-align">
					<a class="waves-effect waves-light btn-large teal modal-trigger" href="#modal1">
						<i class="material-icons left">fingerprint</i>
						点击使用微信支付
					</a>
				</div>
			</div>
			<div id="test2" class="col s12">
				<ul class="collapsible  popout" data-collapsible="accordion">
					<li>
						<div class="collapsible-header"><i class="material-icons">assistant_photo</i>2019-10-12 12:10 312.23¥ 微信支付</div>
						<div class="collapsible-body">
							<ul class="collection">
								<li class="collection-item">处方 2019-09-28 13:23 金额 13¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 14¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 34¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 100¥</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="collapsible-header"><i class="material-icons">assistant_photo</i>2019-10-11 12:10 1200¥ 微信支付</div>
						<div class="collapsible-body">
							<ul class="collection">
								<li class="collection-item">处方 2019-09-28 13:23 金额 200¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 500¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 500¥</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="collapsible-header"><i class="material-icons">assistant_photo</i>2019-10-10 12:10 400¥ 微信支付</div>
						<div class="collapsible-body">
							<ul class="collection">
								<li class="collection-item">处方 2019-09-28 13:23 金额 300¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 50¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 30¥</li>
								<li class="collection-item">处方 2019-09-28 13:23 金额 20¥</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 引入jQuery -->
		<script src="../../Content/js/jQuery_3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入materialize（依赖jQuery） -->
		<script src="../../Content/js/materialize.js" type="text/javascript"></script>
		<!-- 引入vue.js -->
		<script src="../../Content/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入axios.js -->
		<script src="../../Content/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('ul.tabs').tabs();
			});
			$(document).ready(function() {
				$('.collapsible').collapsible();
			});
		</script>
	</body>
</html>
